<template>
	<div class="search-box">
		<form action="javascript:return true;">
			<input type="search" v-model.trim="inputVal" name="searchInput" placeholder="请输入姓名/号码搜索" @keyup.enter="callback(enterpriseId, inputVal)">
			<i class="icon-search"></i>
			<i class="icon-close" @click="inputVal=''" v-if="inputVal"></i>
			<span class="search-btn" @click="search(inputVal)">搜索</span>
		</form>
	</div>
</template>

<script>
export default {

  	name: 'search',

  	props: {
  		enterpriseId: String,
  		callback: Function
  	},

  	data () {
	    return {
	    	inputVal: ''
	    };
  	},

  	methods: {
  		search (inputVal) {
			if (inputVal) this.callback(this.enterpriseId, inputVal)
  		}
  	},

  	watch: {
  		'inputVal' (a, b) {
			if (!a) this.callback(this.enterpriseId, this.inputVal);
  		}
  	}
};
</script>

<style lang="scss" scoped>
	@import '../../scss/mixin.scss';
	.search-box{
		position: relative;
		width: 100%;
		height: 100px;
		background: #fff;
		padding: 20px 80px 20px 20px;
		box-sizing: border-box;

		input[type=search] {
			width: 100%;
			height: 60px;
			background: #f5f5f5;
			border-radius: 30px;
			padding: 0 20px 0 50px;
			font-size: 26px;
			display: inline-block;
			vertical-align: middle;
		}
		i.icon-search{
			left: 50px;
		}
		i.icon-close{
			left: auto;
			right: 90px;
		}
		.search-btn{
			position: absolute;
			top: 0;
			right: 0;
			font-size: 26px;
			width: 80px;
			height: 100px;
			line-height: 100px;
			text-align: center;
			color: #333;

		}
	}
	:-moz-placeholder { 
	    color: #c4c4c4; 
	}

	::-moz-placeholder { 
	    color: #c4c4c4;
	}

	input:-ms-input-placeholder{
	    color: #c4c4c4;
	}

	input::-webkit-input-placeholder{
	    color: #c4c4c4;
	}

	@keyframes searchleft {
		0%{
			transform: translateX(130px);
			opacity: 0;
		},
		100%{
			transform: translateX(0);
			opacity: 1;
		}

	}

</style>